<template>
  <div class="awardAndPunishment">
    <div class="awardAndPunishment-header clearfloat">
      <div class="fl mb10">
        <el-button @click="add">+添加奖惩</el-button>
      </div>
      <!-- 列表查找 -->
      <div class="search-wrap clearfloat">
        <table-search ref="table-search" :selectHead="selectHead" @searchMethods="searchMethods"></table-search>
      </div>
    </div>

    <el-table
      ref="tableRef"
      :data="tableData"
      border
      style="width: 100%"
      v-loading="loading"
      @sort-change="tableSortChange"
      height="88%"
    >
      <el-table-column show-overflow-tooltip label="ID" width="60" align="left">
        <template slot-scope="scope">{{(scope.$index+1)+(currentPage-1)*tableSize }}</template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="代理人"
        align="left"
        prop="agent"
        sortable="custom"
        min-width="130"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="奖惩类型"
        align="left"
        prop="data_type"
        sortable="custom"
        min-width="130"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="奖惩金额(元)"
        align="left"
        prop="money"
        sortable="custom"
        min-width="140"
      >
        <template slot-scope="scope">
          <span
            :class="scope.row.data_type == '奖励' ? 'font_danger' : 'font_success'"
          >{{scope.row.money }}</span>
        </template>
      </el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="奖惩原因"
        align="left"
        prop="reason"
        sortable="custom"
        min-width="130"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="申请人"
        align="left"
        prop="applicant"
        sortable="custom"
        min-width="130"
      ></el-table-column>
      <el-table-column
        show-overflow-tooltip
        label="申请时间"
        align="left"
        prop="created_at"
        sortable="custom"
        min-width="180"
      ></el-table-column>
      <el-table-column min-width="140" fixed="right" label="操作" align="center" v-if="$store.state.user.role_id == 1">
        <template slot-scope="scope">
          <el-button size="small" type="primary" @click="operate('yes', scope.row)">通过</el-button>
          <el-button size="small" type="danger" @click="operate('no', scope.row)">拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination @paginationChange="paginateChange" :total="total"></pagination>
    <addAwardOrPunishment
      ref="addAwardOrPunishment"
      :agentOptions="agentOptions"
      @refresh="getTableData"
    ></addAwardOrPunishment>
  </div>
</template>

<script>
import Pagination from "~/components/pagination";
import tableSearch from "~/components/tableSearch";
import addAwardOrPunishment from "./components/add-awardOrPunishment.vue";
export default {
  data() {
    return {
      tableData: [],
      loading: false,
      pageSize: 25, //一页可以几条
      pageSizes: [25, 50], //一页可以几条,
      currentPage: 1, //目前在第几页
      current_page: 0,
      tableSize: 25, //一页几条
      total: 0,
      paramsByabnormal: {
        // user_type: 1,
      },
      myInfo: {
        drawing_agent_check: 0
      },
      selectHead: [
        {
          label: "代理人",
          props: "agent_id"
        },
        {
          label: "奖惩类型",
          props: "type"
        },
        {
          label: "奖惩金额",
          props: "money"
        },
        {
          label: "奖惩原因",
          props: "reason"
        },
        {
          label: "申请人",
          props: "applicant"
        },
        {
          label: "申请时间",
          props: "created_at"
        }
      ],
      search_params: {},
      agentOptions: []
    };
  },
  components: {
    Pagination,
    tableSearch,
    addAwardOrPunishment
  },
  created() {
    this.getTableData(), this.getAllAgent();
  },
  methods: {
    getTableData(args) {
      let params = {
        perPage: this.pageSize,
        page: this.currentPage
      };
      params = { ...params, ...this.paramsByabnormal, ...this.search_params };
      if (args) {
        params = { ...params, ...args };
      }
      this.$axios
        .get("api/activity/reward_deduction_list", {
          params: params
        })
        .then(res => {
          if (res.data.code == 200) {
            this.loading = false;
            this.tableData = res.data.data;
            this.pageSize = res.data.page.per_page;
            this.total = res.data.page.total;
            // this.getMyinfo()
          } else {
            this.$message.error("服务器繁忙");
          }
        });
    },
    searchMethods(params, no_search) {
      this.sort_params = {};
      this.currentPage = 1;
      this.pageSize = 25;
      this.search_params = params;
      if (!no_search) {
        this.getTableData();
      }
    },
    paginateChange(params) {
      this.pageSize = params.perPage;
      this.currentPage = params.page;
      this.getTableData();
    },
    tableSortChange(column) {
      if (column.order === "descending") {
        this.paramsByabnormal.sort_str = column.prop;
        this.paramsByabnormal.sort_order = "desc";
      } else if (column.order === "ascending") {
        this.paramsByabnormal.sort_str = column.prop;
        this.paramsByabnormal.sort_order = "asc";
      } else {
        delete this.paramsByabnormal.sort_str;
        delete this.paramsByabnormal.sort_order;
      }
      this.loading = true;
      this.currentPage = 1;
      this.getTableData();
    },
    add() {
      this.$refs["addAwardOrPunishment"].showOn();
    },
    operate(pass, data) {
      let params = {
        pass: pass
      };
      let msg = pass == "yes" ? "确定通过奖励审核吗？" : "确定拒绝奖励审核吗？";
      if (this.activeTabs != "reward") {
        msg = pass == "yes" ? "确定通过惩戒审核吗？" : "确定拒绝惩戒审核吗？";
      }
      this.$confirm(msg, "提醒", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        center: true
      })
        .then(() => {
          this.rewardPost(params, data);
        })
        .catch(() => {});
    },
    rewardPost(params, data) {
      // let url =
      //   this.activeTabs == "reward"
      //     ? `/api/rewardRecord/${data.id}`
      //     : `/api/deduction/${data.id}`;
      // if (data.type == 2) {
      //   url =
      //     this.activeTabs == "reward"
      //       ? `/api/rewardRecord/${data.id}/agent_reward_record_auditor`
      //       : `/api/deduction/${data.id}/agent_deduction_auditor`;
      // }
      let url =
          data.data_type == "奖励"
            ? `/api/rewardRecord/${data.id}/agent_reward_record_auditor`
            : `/api/deduction/${data.id}/agent_deduction_auditor`;
      this.$axios
        .put(url, params)
        .then(res => {
          if (res.data.code == 200) {
            this.$message({
              type: "success",
              message: "操作成功"
            });
            this.getTableData();
          } else {
            this.$message({
              type: "error",
              message: res.data.message
            });
          }
        })
        .catch(e => {
          console.log(e);
        });
    },
    getAllAgent() {
      this.$axios
        .get("api/user/agent/all")
        .then(res => {
          if (res.data.code == 200) {
            this.agentOptions = res.data.data;
          }
        })
        .catch(err => {
          this.$message({
            type: "err",
            message: err
          });
        });
    }
  }
};
</script>

<style lang='less' type='text/css'>
.abnormalData {
  height: 100%; //撑满表格
  .withdraw-header {
    margin-bottom: 20px;
  }
  .el-table {
    width: 99.9% !important;
  }
}
</style>
